<template>
	<view class="recommend">
		<view class="tab_nav">
			<nav-bar
				v-if="!isJL"
				nav_btn="back"
				:index="index"
				:title="title"
				@onPicker="onPicker"
				:showPicker="showPicker"
				:color="color"
				:placeholder="placeholder"
				:list="shopList"
				:auto_img="image"
				:background="background"
			></nav-bar>
			<view v-else class="" style="width: 100%; position: fixed; top: 0; z-index: 999">
				<view class="topFixed">
					<view class="" :style="'height:' + navBarInfo.statusBarHeight + 'px;'"></view>
					<view class="flex align-center justify-between" :style="'height:' + navBarInfo.navBarHeight + 'px;'">
						<view class="flex flex-1 align-center" style="">
							<view @click="goBack" class="back_icon" style="font-size: 0"></view>
						</view>
						<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx; color: #fff">推荐记录</view>
						<view class="flex-1"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="head_box w100"></view>
		<view class="list_nav" style="overflow-x: scroll">
			<view class="flex">
				<view class="list_box" v-for="(item, index) in navList" @click="navActive(index)" :key="index">
					<view :class="[navListIndex == index ? 'nav_name_active' : 'nav_name']">
						{{ item.name }}
					</view>
					<view class="nav_img" v-if="navListIndex == index">
						<image class="w100 h100" src="../static/nav_bot.png" mode=""></image>
					</view>
				</view>
				<view class="" style="min-width: 50rpx"></view>
			</view>
		</view>
		<view class="cx_list_box h100 mar-auto">
			<view class="c_list_nei" v-for="(item, index) in list" :key="index">
				<view class="head_c_box flexjus">
					<view class="flex">
						<view class="head_tx">
							<image class="w100 h100" :src="item.shop.avatar_url" mode=""></image>
						</view>
						<view class="c_name fblod familytow s28">
							{{ item.shop.shopname }}
						</view>
					</view>
					<view class="c_status_w s26 f500 family">
						{{
							item.status == 0
								? '审核中'
								: item.status == 1
								? '跟进中'
								: item.status == 2
								? '拒绝'
								: item.status == 3
								? '成交'
								: item.status == 4
								? '已跑单'
								: item.status == 5
								? '无效'
								: '同意'
						}}
					</view>
				</view>
				<view class="c_user_info_box flexjus" v-for="(items, indexs) in item.custom" :key="indexs">
					<view class="flex">
						<view class="user_name_box">
							<image class="w100 h100" src="../static/name.png" mode=""></image>
						</view>
						<view class="user_name_txt s26 family f500">
							{{ items.username }}
						</view>
					</view>
					<view class="flex">
						<view class="user_phone_box">
							<image class="w100 h100" src="../static/phone.png" mode=""></image>
						</view>
						<view class="user_name_txt s26 family f500">
							{{ items.mobile }}
						</view>
					</view>
				</view>
				<view class="bottom_box flex flexjus">
					<view class="gdyg_txt s22 family f500">跟单员工：{{ item.dispatch.nickname || '' }}</view>
					<view class="gdyg_txt s22 family f500">
						{{ get_dates(item.createtime) }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navListIndex: 0,
			title: '',
			image: '../static/tab_jian.png',
			color: 'black',
			showPicker: true,
			background: '#EBBE87',
			navList: [
				{
					name: '全部'
				},
				{
					name: '待审核'
				},
				{
					name: '跟进中'
				},
				{
					name: '已跑单'
				},
				{
					name: '无效单'
				},
				{
					name: '已成交'
				}
			],
			list: [],
			shopId: 0,
			shopList: [],
			index: 0,
			isJL: true,
			isSave: false,
			navBarInfo: {}
		};
	},
	onLoad(options) {
		let obj = JSON.parse(options.obj);
		this.navBarInfo = this.$navBarInfo;
		if (obj.JL) {
			this.isJL = true;
			this.getList();
		} else {
			this.isJL = false;
			this.shopId = obj.shopId;
			this.index = obj.index;
			this.getShopList();
			this.getList();
		}
	},
	methods: {
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		getList() {
			let that = this;
			let data = {
				status:
					this.navListIndex == 0
						? ''
						: this.navListIndex == 1
						? 0
						: this.navListIndex == 2
						? 1
						: this.navListIndex == 3
						? 4
						: this.navListIndex == 4
						? 5
						: this.navListIndex == 5
						? 3
						: '',
				shop_id: this.isJL ? 0 : this.shopId
			};
			if (this.isJL) {
				data.user_id = uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0;
			}
			this.$request({
				url: 'manage/getCustomerList',
				method: 'POST',
				data
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					data.map((item) => {
						item.custom.map((key) => {
							key.mobile = key.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
						});
					});
					that.list = data;
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
			});
		},
		navActive(i) {
			this.navListIndex = i;
			this.getList();
		},
		//获取店铺列表
		getShopList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: '',
					type: 1
				}
			}).then((res) => {
				this.shopList = res.data.data;
			});
		},
		// 选择店铺
		onPicker(e) {
			this.shopId = this.shopList[e].id;
			this.index = e;
			this.getList();
		}
	}
};
</script>

<style scoped lang="scss">
.back_icon {
	margin-left: 36rpx;
	width: 36rpx;
	height: 36rpx;
	background: url()
		no-repeat center;
}
.recommend {
	background-color: #f4f5f9;
	.tab_nav {
		position: absolute;
		z-index: 9999;
	}

	.head_box {
		height: 400upx;
		background-color: #ebbe87;
		overflow: hidden;
		position: fixed;
	}

	.list_nav {
		position: fixed;
		height: 300rpx;
		background: #ebbe87;
		z-index: 999;
		width: 100%;

		.list_box {
			min-width: 90rpx;
			margin-left: 50rpx;
			margin-top: 230rpx;

			.nav_name {
				font-size: 26upx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				text-align: center;
			}

			.nav_name_active {
				font-size: 30upx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #844902;
				text-align: center;
			}

			.nav_img {
				width: 31upx;
				height: 6upx;
				margin: -10upx auto;
			}
		}

		.list_box:nth-child(1) {
			margin-left: 40upx;
		}
	}

	.cx_list_box {
		width: 686upx;
		position: relative;
		top: 320rpx;

		.c_list_nei {
			width: 650upx;
			background-color: #ffffff;
			border-radius: 8upx 8upx 8upx 8upx;
			padding: 30upx 0 20upx 32upx;
			margin-bottom: 20upx;

			.head_tx {
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #999;
			}

			.c_name {
				color: #666666;
				margin-left: 12upx;
			}

			.c_status {
				color: #ebbe87;
				margin-left: 128upx;
			}

			.c_status_j {
				color: #ff3f4a;
				margin-left: 128upx;
			}

			.c_status_d {
				color: #999;
				margin-left: 128upx;
			}

			.c_status_w {
				color: #999;
				margin-right: 30upx;
			}

			.c_user_info_box {
				width: 624upx;
				height: 70upx;
				background: #fafafa;
				border-radius: 4upx 4upx 4upx 4upx;
				margin-top: 20upx;

				.user_name_box {
					width: 32upx;
					height: 32upx;
					border-radius: 50%;
					margin: 20upx 0 0 20upx;
				}

				.user_name_txt {
					color: #666666;
					line-height: 70upx;
					margin-left: 20upx;
				}

				.user_phone_box {
					width: 30upx;
					height: 30upx;
					border-radius: 50%;
					margin: 18upx 0 0 0;
				}
			}

			.bottom_box {
				margin-top: 32upx;
				padding-right: 30upx;

				.gdyg_txt {
					color: #999999;
				}
			}
		}
	}
}
</style>
